<template>
	<div style="width: 100%;display: flex;">
		<div>
			<el-text style="color:#F42750 ; font-size: 1rem;">商品详情</el-text>
		</div>
		<div style="margin-left: 75%;">
			<el-text style="color:#F42750 ;font-size: 1rem;">同类商品推荐</el-text>
		</div>
	</div>
		<div style="width: 100%; background-color:#E1337F ;height: 0.1rem;"/>
			<div>
				<el-container>
				      <el-aside width="40%" style="height: 80%;">
						  <el-image style="width: 75%;height: 90%;margin-left:8rem;margin-top: 0.625rem; border: 0.2rem solid #D0CDCC;" :src="$ip+`/public/shows/`+data.com.pic"  />
						  </el-aside>
				      <el-main >
						  <div style="margin-left: 10%; ">

							<div >
							  	<p>{{data.com.info}}{{data.com.comname}}</p>
								<p>类型：
								<span style="margin-left: 10%;">{{data.com.type.typeid}}</span></p>
								<p>制造商：
								<span style="margin-left: 6%;">{{data.com.makers}}</span></p>
								<p>商品编码：
								<span style="margin-left: 2%;">{{data.com.comsn}}</span></p>
								<p>销量：
								<span style="margin-left: 10%;">{{data.com.sales}}</span></p>
								<p>库存：
								<span style="margin-left: 10%;">{{data.com.stock}}</span></p>
								<p>价格：
								<span style="margin-left: 10%;color: red;">¥{{data.com.price}}</span></p>
								<p>数量：
								<span style="margin-left: 2%;color: red;">
								<button id="minus" @click="del()">-</button>
								    <span id="count">{{data.count}}</span>
								    <button id="plus" @click="add()">+</button>
								</span></p>
								<el-button  style="color: #FFFFFF;background-color: #E1337F;border:#E1337F ;margin-left: 10%;" size="large" @click="cart()"><el-icon><ShoppingCart/></el-icon>添加购物车</el-button>
								
							</div>
							  
						  </div>
						  </el-main>
				      <el-aside width="25%">
						  <div v-for="index in data.list">
							  
							  <el-button style="width: 100%;height: 100%;color: #000000;justify-content: flex-start;border: 0px;" size="large" @click="detail(index.comid)">
							   								  <el-avatar style="height: 6rem;width: 30%;">
							   								    <el-link ><el-image :src="$ip+`/public/shows/`+index.pic" />
							   								  </el-link>
							   								  </el-avatar>
							   								  &emsp;
							  								<div>
							  									<p>{{index.comname}}</p>
							  									<span>{{index.makers}}</span>
							  								</div>
							   								  &emsp;
							  								<div>
							  									{{index.type.typeid}} 
							  								</div>
							  								&emsp;
							  								<div style="color: #f56c6c; font-size: 1.25rem;margin-left: auto;">
							  									¥{{index.price}}
							  								</div>
							  </el-button>
							  
						  </div>
						</el-aside>
				    </el-container>
				
			</div>
			
	<div style="width: 100%; background-color:#E1337F ;height: 0.1rem;"/>
	<div style="width: 80%;height: 13rem;margin-left: 7rem;">
		<img
		  style="width: 100%;height: 100%;"
		  src="../../assets/cma.png"
		  alt="Element logo"
		/>
	</div>
	<div style="width: 100%;height: 4rem;background-color: #D2D2D2; display: flex;">
		&emsp;
		<el-text style=" font-size: 1.5rem; ">商品全部评价</el-text>
	</div>
	<div style="width: 100%;background-color: #F3F3F3;">
		<div v-for="index in data.remark">
		<div style="display: flex;">
			<div style=" width: 20%;display: flex;">
				<el-avatar style="height: 6rem;width: 30%;">
				  <el-link ><el-image :src="$ip+`/public/shows/`+data.com.pic" />
				</el-link>
				</el-avatar>
				<div>
					<p>{{index.user.uid}}</p>
					<p>会员</p>
				</div>
			</div>
			<div >
				<div>
					{{mytpost(index.remdate)}}
					  <el-rate
					    v-model="index.rate"
					    disabled
					    show-score
					    text-color="#ff9900"
					    score-template="{value} points"
					  />
				</div>
				<div>
					<el-text>{{index.content}}</el-text>
				</div>
			</div>
		</div>
		<div style="width: 100%; background-color:#DED9DA ;height: 0.1rem;"/>
		</div>
		
	</div>
		<div style="width: 100%; ">
			<div style="margin-left: 50%;">
				<el-button type="danger" size="large" style="background-color: #E1337F;" @click="more()" >点击查看更多>></el-button>  
			</div>
			
		</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {Search,ShoppingCart} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {success,warning,message,errors} from '../../store/alert.js'
		import {useRoute} from "vue-router"
		
		const route = useRoute()
		
		const data=reactive({
			comid:"",
			com:{stock:1,type:{}},
			count:1,
			list:[{type:{}}],
			remark:[],
			page:{
				pagenum:0,
				lines:2
			}
		})
		function add(){
			if(data.count>=data.com.stock){
				data.count=data.com.stock
			}else{
				data.count++
			}
			
		}
		function del(){
			if(data.count<=1){
				data.count=1
			}else{
				data.count--
			}
			
		}
		function detail(comid){
			console.log("商品推荐")
			$get("/public/findBycom/"+comid).then(function(resd){
					console.log("findBycom:")
					console.log(resd.data.data)
					data.com=resd.data.data.com
					data.list=resd.data.data.list
					console.log(data.com)
					
				})
			
		}
		function more(){
			data.page.lines=data.page.lines+data.page.lines
			console.log(data.page)
			console.log(data.comid)
			$get("/public/findRemark/"+data.comid+"/"+data.page.pagenum+"/"+data.page.lines).then(function(resd){
				console.log(resd.data)
				data.remark=resd.data.data
			})
			
		}
		function cart(){
			console.log("添加购物车")
			console.log(data.comid)
			console.log(data.count)
			$get("/user/addCart/"+data.comid).then(function(resd){
				console.log(resd.data.data);
				success(resd.data.msg)
			})
		}
		const mytpost = computed(() => {
			return function(tpost) {
				console.log(tpost)
				let t = new Date(tpost)
				let yy = t.getFullYear()
				let mm = t.getMonth() + 1
				let dd = t.getDate()
				let a = yy + "年" + mm + "月" + dd + "日"
				console.log(a)
				return a
			}
		})
		onMounted(()=>{
		   let c=route.query.comid
			console.log("订单id："+c);
			data.comid=c
			$get("/public/findBycom/"+c).then(function(resd){
				console.log("findBycom:")
				console.log(resd.data.data)
				data.com=resd.data.data.com
				data.list=resd.data.data.list
				data.remark=resd.data.data.remark
				console.log(data.remark)
				
			})
		})
		
		
</script>

<style>
</style>
